<!--
* @author wn
* @date 2023/03/08 13:32:42
* @description: 框架右侧  头部区域
!-->
<template>
	<a-layout-header>
		<Icon
			:icon="iconFold"
			v-if="collapsed"
			:style="{ fontSize: '26px', color: '#fff' }"
			class="trigger"
			@click="$emit('update:collapsed', !collapsed)"
		/>
		<Icon
			v-else
			class="trigger"
			:style="{ fontSize: '26px', color: '#fff' }"
			:icon="iconUnFold"
			@click="$emit('update:collapsed', !collapsed)"
		/>
		<!-- 右上角 用户 menu -->
		<user-menu />
	</a-layout-header>
</template>
<script setup>
import { ref } from 'vue'
import { Icon } from '@/antd/icons'
import UserMenu from '@/components/tools/UserMenu.vue'

// 关闭 图标
const iconFold = ref('MenuUnfoldOutlined')
const iconUnFold = ref('MenuFoldOutlined')

defineProps({
	collapsed: {
		type: Boolean,
		default: false,
	},
})
</script>
<style scoped lang="less">
@height: 59px;
@primary-color: #1890ff;
.ant-layout-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: @height;
	background: @primary-color;
	transition: background 300ms;
	padding: 0px;
	z-index: 2;

	.trigger {
		padding: 10px 16px;
		&:hover {
			background: rgba(255, 255, 255, 0.3);
		}
	}
}
</style>
